// <!-- 需求一： 获取数据并渲染页面 -->

initArtCateList()


function  initArtCateList(callback) {
  // 1 直接发送数据请求
  $.ajax({
    url:"/my/article/cates",
    success: res =>{
      if(res.status != 0) return layer.msg(res.message)

      // 1.2 渲染到页面中    推荐使用 模板引擎
      // 1.3 template(模板的id, 对象)

      let str =  template('tpl-table',  res)
      $('tbody').html(str)
      callback && callback()
    }
  })
}
// 3.3.2 定义成全局方便后面获取 
let addIndex = null 

// 需求二 点击添加 弹出一个弹出层
$('#btnAddCate').click(function(){
  // 2.1 把弹出层显示出来

  addIndex = layer.open({
    // type1 取消确定按钮 
    type: 1,
    title: '添加文章分类',
    content: $('#dialog-add').html(),
    area: ['500px', '250px']
  });     
    
})

// 需求三： 点击确认 新增分类
// 3.1 给确认添加绑定一个事件 表单的提交事件 这个事件只能使用事件委托 
// 3.2 发送请求==> 这个地方有坑 
$('body').on('submit', '#form-add',  function(){
  
// 3.2 发送请求==> 这个地方有坑 
// 3.2.1 添加分类 liulongbin那个接口有bug  切换成 之前用的那个  

  $.post('/my/article/addcates',  $(this).serialize(), res =>{
    layer.msg(res.message)
    if(res.status != 0) return  
   console.log(res)
  // 3.3 把弹出层关闭 页面需要重新渲染
  // 3.3.1 需要先拿到当前弹出层的index 
  // 3.3.3 调用 layer.close 关闭弹出层
  layer.close(addIndex)


  // 3.4 刷新页面 
  initArtCateList()
  } )

  return false 
})


// 需求四 删除 
//  注意 删除是动态生成的 
$('body').on('click','.delete-btn', function(){
  // 4.1 先把提示框 粘贴过来
  layer.confirm('确认删除?', {icon: 3, title:'提示'}, index => {
  //  4.2 点击确定 发起ajax 请求 
  // 4.3 path 参数  英文单词 路径的意思 
  // 4.3.1 path 参数 表示 把参数的值 直接放到 url 里面
  // 4.3。2 /my/article/deletecate/{id}   这个 {id} 表示就是path参数 
  //  我们需要处理的就是把{id} 替换成真实的id  /my/article/deletecate/1 
  // /my/article/deletecate/2 


    // 4.4 给删除绑定一个id=当前的id值 注意 $value.Id Id 后端返回的字段
    // 4.4.1 这里的this 指向的  layer.confirm  我们想要的this 是应该 delete-btn  箭头函数    箭头函数没有this this 指向的是上一级的this 
    // console.log($(this))
    // console.log($(this).attr('id'))
    // 4.5 定义变量存储id 
    let id = $(this).attr('id')

    $.ajax({
      // {id} 我们需要传入id 
      url:`/my/article/deletecate/${id}`,
      success: res =>{
        
        if(res.status != 0) return   layer.msg(res.message)
   
        // 拓展知识： 后面在详细来讲
        // 刷新页面 
        initArtCateList( function(){
          layer.msg(res.message)
        } )

        

    

     
      }
    })

 



  });
})

//   需求5 编辑功能
// 5.1 点击编辑 按钮 弹出一个弹出层 
// 5.1.1 需要先给按钮添加一个类名 edit-btn
$('body').on('click', '.edit-btn', function(){
  // console.log(1)
  // 5.2 渲染弹出层的时候 不需要写了 直接 cv添加的 弹出层就可以了
  // 5.2.1 复制弹出层的代码的时候 需要 把 最外层的id 和form的id 同时修改
  editIndex =  layer.open({
    // type1 取消确定按钮 
    type: 1,
    title: '编辑文章分类',
    content: $('#dialog-edit').html(),
    area: ['500px', '250px']
  });    
    

  // 5.3 获取ajax 请求 然后把拿到的数据渲染到页面中 
  // 5.3.1 先拿到当前点击的id  
  // 5.3.2 需要找到编辑按钮  绑定一个自定义属性 
  let id = $(this).attr('id')
  console.log(id)

  $.ajax({
    // 注意这个接口是有一个路径参数
    // /my/article/cates/:id  ==  /my/article/cates/{id}
    url:`/my/article/cates/${id}`,
    success: res =>{
      if(res.status != 0) return  layer.msg(res.message)
      console.log(res)
      // 5.4  给表单进行赋值 
      // $('..edit-btn   [name=name]' ).val()
     let {form} = layui
    //  form.val(第一个值, 第二值)
    // 第一个值 class="layui-form" 所在元素属性 lay-filter="" 对应的值
    //  第二值 对象的键 就是html name字段对应的值 

    form.val('editForm', res.data)
    }

  })

})  


// 需求六  更新文章分类的数据
// 6.1 需要在点击 确认修改的时候  在来更新数据  
// 6.1.1 监听表单的提交事件     ====》 表单是动态生成  
// 6.2 拿到数据发送ajax请求 
// 6.5 定义全局变量  存储编辑的弹出层返回值
let  editIndex = null;

$('body').on('submit', '#form-edit', function(){
// 6.2 拿到数据发送ajax请求 
// 6.2.1 先看接口文档 
// 6.2.2 form 表单中没有id    所以我们需要手动添加一个id 
// 6.2.3 我们在点击编辑的时候  请求了一次数据  可以拿到id 
// 6.2.4 我们需要在点击编辑的时候 就把id 存起来 方便后期更新的时候使用   给表单添加一个 隐藏域 
  $.ajax({
    url:'/my/article/updatecate',
    method: 'POST',
    data: $(this).serialize(),
    success: res =>{
      if(res.status !=0) return  layer.msg(res.message)
      // 6.3 重新渲染页面 
      initArtCateList()
      // 6.4 关闭弹出层 给个提示更新成功

      layer.close(editIndex)

      layer.msg(res.message)
      
    }
  })

  return false 
})
